<% include("/common/top.html"){} %>
    <div class="content-wrapper">
        <section class="content-header">
            <div class="container-fluid">
                <div class="row mb-2">
                    <div class="col-sm-6">
                        <select id="sel_table" class="form-control">
                            <option value="">请选择表</option>
                            <%
                                for(table in tableList) {
                                    print("<option value='"+table+"'>"+table+"</option>");
                                }
                            %>
                        </select>
                    </div>
                    <div class="col-sm-6">
                        <ol class="breadcrumb float-sm-right">
                            <li class="breadcrumb-item"><a href="/">Home</a></li>
                            <li class="breadcrumb-item active">数据管理</li>
                        </ol>
                    </div>
                </div>
            </div><!-- /.container-fluid -->
        </section>

        <!-- Main content -->
        <section class="content">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-12">
                        <div class="card">
                            <div class="card-header">
                                <form class="form-inline" action="" method="post">
                                    <div class="input-group">
                                        <h3 class="card-title"><button type="button" class="btn btn-block bg-gradient-success" onclick="rowAdd()">新增</button></h3>&nbsp;&nbsp;
                                        <h3 class="card-title"><button type="button" class="btn btn-block bg-gradient-danger" onclick="rowDel()">删除</button></h3>
                                    </div>
                                    <div class="form-group" style="margin-left: 10px;">
                                        <input type="text" name="rowkey" value="" class="form-control" placeholder="行键">
                                        <input type="text" name="daterange" value="" class="form-control date" id="daterange" autocomplete="off" placeholder="开始日期  - 结束日期" style="width: 228px;">
                                    </div>
                                    <div class="input-group">
                                        <div class="input-group-btn" style="margin-left: 5px">
                                            <button class="btn btn-default" type="button" onclick="queryData()"><i class="fa fa-search"></i></button>
                                        </div>
                                    </div>

                                </form>
                            </div>
                            <!-- /.card-header -->
                            <div class="card-body">
                                <table id="example2" class="table table-bordered table-hover">
                                    <thread>
                                    <tr>
                                        <th>行键</th>
                                        <th>列簇:列</th>
                                    </tr>
                                    </thread>
                                    <tbody id="hbase_data_list">

                                    </tbody>


                                </table>
                            </div>

                        </div>
                    </div>
                    <!-- /.col -->
                </div>
                <!-- /.row -->
            </div>
            <!-- /.container-fluid -->
        </section>
        <!-- /.content -->
    </div>
    <% include("/common/footer.html"){} %>

</div>
<script id="addDialog" type="text/template">
    <div class="card">
        <div class="card-header">
            <strong>添加记录</strong>
        </div>
        <div class="card-body card-block" id="addNewDiv">
            <form id="form_add" action="" method="post" class="form-horizontal">
                <input type="hidden" id="frmTableName" name="frmTableName" value="" />
                <div class="row form-group">
                    <div class="col col-md-3"><label for="frmRowKey" class=" form-control-label">rowkey</label></div>
                    <div class="col-12 col-md-9"><input type="text" id="frmRowKey" name="frmRowKey"  class="form-control"><span class="help-block"></span></div>
                </div>
                <div class="row form-group">
                    <div class="col-2 col-md-6"><input type="text"  name="frmColumn" placeholder="列簇:列名" class="form-control"><span class="help-block"></span></div>
                    <div class="col-10 col-md-6"><input type="text"  name="frmColumnVal" placeholder="列值" class="form-control"><span class="help-block"></span></div>
                </div>

            </form>
        </div>
        <div class="card-footer">
            <button type="submit" onclick="newColumn()" class="btn btn-primary btn-sm">
                <i class="fa fa-dot-circle-o"></i> 增加列
            </button>
            <button type="submit" onclick="rowSub()" class="btn btn-primary btn-sm">
                <i class="fa fa-dot-circle-o"></i> 提交
            </button>
            <button style="margin-left: 30px" type="reset" onclick="dialogClose()"  class="btn btn-danger btn-sm">
                <i class="fa fa-ban"></i> 关闭
            </button>
        </div>
    </div>
</script>
<script id="newRow" type="text/template">
    <div class="row form-group">
        <div class="col-2 col-md-6"><input type="text"  name="frmColumn" placeholder="列簇:列名" class="form-control"><span class="help-block"></span></div>
        <div class="col-10 col-md-6"><input type="text"  name="frmColumnVal" placeholder="列值" class="form-control"><span class="help-block"></span></div>
    </div>
</script>
<script id="editDialog" type="text/template">
    <div class="card">
        <div class="card-header">
            <strong>编辑</strong>
        </div>
        <div class="card-body card-block">
            <form action="" method="post" class="form-horizontal">
                <div class="row form-group">
                    <div class="col col-md-3"><label for="edit_rowkey" class=" form-control-label">行键</label></div>
                    <div class="col-12 col-md-9"><input type="text" id="edit_rowkey" name="edit_rowkey" disabled class="form-control"><span class="help-block"></span></div>
                </div>
                <div class="row form-group">
                    <div class="col col-md-3"><label for="edit_column" class=" form-control-label">列</label></div>
                    <div class="col-12 col-md-9"><input type="text" id="edit_column" name="edit_column" disabled class="form-control"><span class="help-block"></span></div>
                </div>
                <div class="row form-group">
                    <div class="col col-md-3"><label for="edit_value" class=" form-control-label">值</label></div>
                    <div class="col-12 col-md-9"><textarea  id="edit_value" name="edit_value"  class="form-control"></textarea></div>
                </div>

            </form>
        </div>
        <div class="card-footer">
          
            <button type="submit" onclick="editSub()" class="btn btn-primary btn-sm">
                <i class="fa fa-dot-circle-o"></i> 修改
            </button>
            <button type="submit" onclick="columnDel()" class="btn btn-danger btn-sm">
                <i class="fa fa-dot-circle-o"></i> 删除
            </button>
            <button style="margin-left: 50px" type="reset" onclick="dialogClose()"  class="btn btn-dark btn-sm">
                <i class="fa fa-ban"></i> 关闭
            </button>

        </div>
    </div>
</script>
<!-- jQuery -->
<script src="/static/plugins/jquery/jquery.min.js"></script>
<!-- Bootstrap 4 -->
<script src="/static/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="/static/plugins/layui/layui.all.js"></script>
<script src="/static/dist/js/adminlte.min.js"></script>
<script src="/static/plugins/daterangepicker/moment.js"></script>
<script src="/static/plugins/daterangepicker/daterangepicker.js"></script>

<script>

    function newColumn() {
        $('#form_add').append($('#newRow').html());
    }
    function rowAdd() {
        if($('#sel_table').val() == '') {
            layer.msg("请先选择表");
            return;
        }
        layer.open({
            type: 1,
            title:false,
            area: '600px',
            maxmin:true,
            offset: '50px',
            shadeClose: true,
            content: $('#addDialog').html()
        });
        $('#frmTableName').val($('#sel_table').val());
    }
    function columnDel() {
        layer.confirm('确定要删除么？', {
            btn: ['确定','取消'] //按钮
        }, function(){
            var data = {"tableName":$('#sel_table').val(),"rowKey":$('#edit_rowkey').val(),"column":$('#edit_column').val()};
            $.ajax({
                url: '/record/ajax/column/del',
                type: 'get',
                data: data,
                success: function (data) {
                    if(data.code!=200) {
                        layer.alert("删除失败");
                    } else {
                        layer.closeAll();
                        layer.msg("删除成功");
                        queryData();
                    }
                }
            });

        }, function(){

        });

    }
    function editSub() {
        var data = {"tableName":$('#sel_table').val(),"rowKey":$('#edit_rowkey').val(),"column":$('#edit_column').val(),"value":$('#edit_value').val()};
        $.ajax({
            url: '/record/ajax/column/update',
            type: 'post',
            data: data,
            success: function (data) {
                if(data.code!=200) {
                    layer.alert("编辑失败");
                } else {
                    layer.closeAll();
                    layer.msg("编辑成功");
                    queryData();
                }
            }
        });
    }
    function rowEdit(key, obj) {
        layer.open({
            type: 1,
            title:false,
            area: '600px',
            shadeClose: true,
            content: $('#editDialog').html()
        });
        $('#edit_rowkey').val(key);
        $('#edit_column').val($(obj).find('span').eq(0).text());
        $('#edit_value').val($(obj).find('span').eq(1).text());
    }
    function rowSub() {
        if($('#frmRowKey').val() == '') {
            layer.msg("rowkey不能为空");
            $('#frmRowKey').focus();
            return;
        }
        var data = $('#form_add').serialize();
        $.ajax({
            url: '/record/ajax/add',
            type: 'POST',
            data: data,
            success: function (result) {
                if(result.code!=200) {
                    layer.alert("添加失败");
                } else {
                    layer.closeAll();
                    layer.msg("操作成功");
                    queryData();
                }
            }
        });

    }
    function dialogClose() {
        layer.closeAll();
    }

    function rowDel() {
        var delKeys = '';
        $.each($('input:checkbox:checked'),function(){
            delKeys += $(this).val() +",";
        });
        if(delKeys == '') {
            layer.alert("请先选择要删除的记录");
            return;
        }
        delKeys = delKeys.substring(0, delKeys.length - 1);
        layer.confirm('确定要删除么？', {
            btn: ['确定','取消'] //按钮
        }, function(){
            var data = {"tableName":$('#sel_table').val(),"rowKeys":delKeys};
            $.ajax({
                url: '/record/ajax/row/del',
                type: 'GET',
                data: data,
                dataType: 'json',
                success: function (result) {
                    if(result.code!=200) {
                        layer.alert("删除失败");
                    } else {
                        layer.msg("删除成功");
                        queryData();
                    }
                }
            });
        }, function(){

        });
    }
    function queryData() {
        var table = $('#sel_table').val();
        if(table == '') {
            return;
        }
        var key = $('input[name="rowkey"]').val();
        var dateRange = $('input[name="daterange"]').val();
        var json = {"key":key,"tableName":table,"dateRange":dateRange};
        $('#hbase_data_list').empty();
        $.ajax({
            url: '/record/ajax/list',
            data: json,
            type: 'GET',
            dataType: 'json',
            success: function (result) {
                $.each(result.data, function (index, value) {

                    var str = '<tr></tr><th><input type="checkbox" name="c_rowkey" value="'+value.row_key+'"> '+value.row_key+'</th>';
                    str += '<th><div id="hbase_div"><ul>';
                    $.each(value.cell_list, function (i, cell) {
                        var cls = cell.value.length > 20 ? "span2":"span3";
                        str +='<li onclick="rowEdit('+value.row_key+',this)"><span class="span1">'+cell.family+":"+cell.qualifier+'</span><br/><span class="'+cls+'"><p>'+cell.value+'</p></span></li>';
                    });
                    str += "</ul></div></th></tr>";
                    $('#hbase_data_list').append(str);
                });

            }
        })
    }


    $(function () {
        var tableName = "<% print(tableName); %>";
        if(tableName!="") {
            $('#sel_table option:first').remove();
            $('#sel_table').val(tableName);
        }
        //queryData();
    });



    function getBoforeDate(before){
        var now = new Date();
        now.setDate(now.getDate()-before);
        return now;
    }

    function getBoforeMonth(beforeMonth,day){
        var now = new Date();
        now.setDate(day);
        now.setMonth(now.getMonth()-beforeMonth);
        return now;
    }

    $(function(){

        var now = new Date();

        $('.date').daterangepicker({
            "showWeekNumbers": true,
            "showISOWeekNumbers": true,
            "ranges": {
                "今天": [
                    now,
                    now
                ],
                "昨天": [
                    getBoforeDate(1),
                    getBoforeDate(1)
                ],
                "最近7天": [
                    getBoforeDate(7),
                    now
                ],
                "最近30天": [
                    getBoforeDate(30),
                    now
                ],
                "本月": [
                    getBoforeMonth(0,1),
                    getBoforeMonth(0,31)
                ],
                "上个月": [
                    getBoforeMonth(1,1),
                    getBoforeMonth(1,31)
                ],
                "最近三个月": [
                    getBoforeMonth(2,1),
                    getBoforeMonth(0,31)
                ]
            },
            "locale": {
                "format": "YYYY/MM/DD",
                "separator": "-",
                "applyLabel": "应用",
                "cancelLabel": "取消",
                "fromLabel": "From",
                "toLabel": "To",
                "customRangeLabel": "自定义",
                "weekLabel": "W",
                "daysOfWeek": [
                    "日",
                    "一",
                    "二",
                    "三",
                    "四",
                    "五",
                    "六"
                ],
                "monthNames": [
                    "一月",
                    "二月",
                    "三月",
                    "四月",
                    "五月",
                    "六月",
                    "七月",
                    "八月",
                    "九月",
                    "十月",
                    "十一月",
                    "十二月"
                ],
                "firstDay": 1
            },
            "alwaysShowCalendars": true,
            "autoUpdateInput":false,
            "opens": "right",
            "buttonClasses": "btn btn-sm"
        }, function(start, end, label) {
            //console.log("New date range selected: ' + start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD') + ' (predefined range: ' + label + ')");
        });

        $('.date').on('apply.daterangepicker', function(ev, picker) {
            $(this).val(picker.startDate.format('YYYY/MM/DD') + ' - ' + picker.endDate.format('YYYY/MM/DD'));
        });

        $('.date').on('cancel.daterangepicker', function(ev, picker) {
            $(this).val('');
        });

    });
</script>
</body>
</html>
